<template>
  <div>
    <el-form ref="customRef" :inline="true" :model="customCl.customs" class="demo-form-inline">
      <el-form-item label="客户名称" prop="name">
        <el-input v-model="customCl.customs.name" type="text" />
      </el-form-item>
      <el-form-item label="是否vip" prop="isVip">
        <el-select v-model="customCl.customs.isVip">
          <el-option v-for="item in customCl.vips" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchCustom()">搜索</el-button>
        <el-button type="primary" @click="reset(customRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div>
    <el-table :data="customCl.tableList" :default-expand-all="false" row-key="id" stripe style="width: 100%">
      <el-table-column label="名称" prop="name" header-align="center" align="center" />
      <el-table-column label="手机号" prop="phone" header-align="center" align="center" />
      <el-table-column label="邮箱" prop="email" header-align="center" align="center" />
      <el-table-column label="是否vip" prop="isVip" header-align="center" align="center">
        <template #default="scope">
          {{ scope.row.isVip ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="签到次数" prop="signNum" header-align="center" align="center" />
    </el-table>
  </div>
  <Page :pageData="customCl.customs" @selectPage="searchCustom"></Page>
</template>
<script lang="ts" setup>
import { customClass } from '@/page/types/custom/custom'
import { customPage } from '@/api/custom'
import { FormInstance } from 'element-plus/es'
const customCl = reactive(new customClass())
const customRef = ref()
const searchCustom = () => {
  customPage(customCl.customs).then(res => {
    customCl.tableList = res.data.records
    customCl.customs.page = res.data.current
    customCl.customs.size = res.data.size
    customCl.customs.total = res.data.total
    console.log(JSON.stringify(customCl.customs))
  })
}
const reset = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  searchCustom()
  customCl.customs = {}
}
onMounted(() => {
  searchCustom()
})
</script>
<style scoped lang="scss">
.el-select {
  width: 200px;
}
</style>
